<template>
  <div class="soundMain">
    <div class="soundUp">
      <component :is="soundcomponent"></component>
    </div>
    <div class="soundBottom">
      <button
        v-for="(item, index) in soundButtons"
        :key="index"
        @click="changeAny(item,index)"
        :class="{ isSetted: currentSoundIndex === index }"
      >
        <div class="iconfont" :class="item.icon"></div>
        <div class="buttonName">{{ item.name }}</div>
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import bofangliebiao from "./soundJumpToView/playList.vue";
import gaojingshengshebei from './soundJumpToView/alarmColckSetting.vue'
import jiemuluzhi from './soundJumpToView/programRecordingView.vue'
import shengkashezhi from './soundJumpToView/SoundCardSetting.vue'
import Upangequ from './soundJumpToView/UMusic.vue'
import zhongshengshezhi from './soundJumpToView/clockSetting.vue'
import zhujigedan from './soundJumpToView/hostListView.vue'
import programRecordingView from "./soundJumpToView/programRecordingView.vue";
const currentSoundIndex = ref(0);
const router = useRouter();
const soundcomponent=ref(bofangliebiao)
const changeAny = (item,index) => {
  currentSoundIndex.value = index;
  soundcomponent.value=item.soundcomponent
};
const soundButtons = ref([
  {
    icon: "icon-bofangliebiao",
    name: "播放列表",
    soundcomponent:bofangliebiao
  },
  {
    icon: "icon-yunzhujiico",
    name: "主机歌曲",
    soundcomponent:zhujigedan
  },
  {
    icon: "icon-Upan",
    name: "U盘歌曲",
    soundcomponent:Upangequ
  },
  {
    icon: "icon-shexiangji",
    name: "节目录制",
    soundcomponent:programRecordingView
  },
  {
    icon: "icon-a-notificationmanagement",
    name: "告警音设置",
    soundcomponent:gaojingshengshebei
  },
  {
    icon: "icon-naozhong",
    name: "钟声设置",
    soundcomponent:zhongshengshezhi
  },
  {
    icon: "icon-shengka",
    name: "声卡设置",
    soundcomponent:shengkashezhi
  },
]);
</script>
<style lang="less" scoped>
@import url("./sound_management.less");
@import url("./soundicon/font_4409834_9gua1lfj48/iconfont.css");
</style>